<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <button @click="goBack">Back</button>
      <button @click="Forward">Forward</button>
      <button @click="goHome">Return Home</button>
    </div>
    <h1> app vue template</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/hello">Hello page</router-link>
    <router-link to="/hi">Hi page</router-link>
    <router-link :to="{name : 'h1' , params: {username: 'JSPang', id: '888'}}">H1 page</router-link>
    <router-link to="/h1">H1 page oo</router-link>
    <router-link :to="{name : 'h2'}">H2 page</router-link>
    <p>route.name: {{ $route.name}}</p>
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>
    <router-view name="left" style="float:left;width:50%;height:300px;background-color:#ccc;"/>
    <router-view name="right" style="float:left;width:50%;height:300px;background-color:#c0c;"/>
    <router-link to="/">Home</router-link>|
    <router-link to="/params/198/jspang website is very good!">Params</router-link>|
    <router-link to="/goHome">Go Home</router-link>|
    <router-link to="/goParams/918/I like Vue.js">Go params</router-link>|
    <router-link to="/ccq">Alias</router-link>|

  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    Forward () {
      this.$router.go(1)
    },
    goHome () {
      this.$router.push('/hello')
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.fade-enter{
  opacity: 0px;
}

.fade-enter-active{
  transition: opacity .5s;
}

.fade-leave{
  opacity: 1;
}

.fade-leave-active{
  opacity: 0;
  transition: opacity .5;
}
</style>
